<template>
	<navbar title="新手入门教程" :isBack="true"></navbar>
	<view class="page">
		<view class="" style="height: 376rpx;width: 100%;">
			<image :src="Info.image" style="height: 376rpx;width: 100%;" mode="aspectFill"></image>
		</view>
		<view class="header">
			<view class="title">
				<view class="title-left">
					{{Info.name}}
				</view>
				<view class="">
					<button class="title-right" style="background-color: white;padding: 0;" open-type="share">
						<view class="image">
							<image src="/static/image/share.png" mode="" style="width: 36rpx;height: 36rpx;"></image>
						</view>
						<view class="text">
							分享
						</view>
					</button>
				</view>
			</view>
			<view class="subtitle">
				{{Info.introduce}}
			</view>
			<view class="price">
				<span style="font-size: 20rpx;">¥</span>
				<span style="font-weight: bold;">{{Info.price}}</span>
			</view>
		</view>

		<view class="" style="padding: 30rpx;margin-top: 20rpx;background-color: white;" v-if="Info.goods && Info.is_enroll != '2'">
			<view class="" style="font-size: 36rpx;font-weight: bold;">
				所含套餐
			</view>
			<view class="" style="display: flex;justify-content: space-between;margin-top: 27rpx;">
				<view class="">
					<span style="font-size: 26rpx;color: #999999;white-space: nowrap;">选择</span>
				</view>
				<view class="" style="margin-left: 40rpx;width: 100%;" @click="submit">
					<view class="" style="display: flex;align-items: center;justify-content: space-between;">
						<span style="font-size: 26rpx;">规格分类</span>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="" style="margin-top: 27rpx;display: flex;">
						<view class="" v-for="(item , index) in Info.goods.size_list" style="margin-right: 10rpx;">
							<image v-if="index < 3" :src="item.icon"
								style="width: 66rpx;height: 66rpx;border-radius: 10rpx;" mode=""></image>
						</view>
						<view class="" v-if="Info.goods.size_list"
							style="background-color: #F2F2F2;border-radius: 10rpx;color: #999999;font-size: 24rpx;line-height: 43rpx;padding: 0 27rpx;height: 66rpx;display: flex;justify-content: center;align-items: center;">
							共{{Info.goods.size_list.length}}种规格可选
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="" style="width: 200rpx;margin-left: -13rpx;margin-top: 20rpx;">
				<u-tabs :list="tabsList" :is-scroll="false" v-model="current" @change="tabsChange"
					active-color="#3F4780"></u-tabs>
			</view> -->
			<!-- 详情 -->
			<!-- <view class="" v-show="!tabIndex" style="min-height: 100vh;margin-top: 20rpx;">
				详情
			</view> -->
			<!-- 目录 -->
			<!-- 	<view class="" id="mulu" style="min-height: 100vh;margin-top: 30rpx;" v-show="tabIndex == 1">
				<view class=""
					style="display: flex;justify-content: space-between;padding-bottom: 30rpx;border-bottom: 1rpx solid #ECECEC;">
					<view class="">
						01 | 握球杆姿势及注意事项
					</view>
					<view class="">
						<view class="" style="font-size: 28rpx;color: red;" v-if="true">
							免费
						</view>
						<image v-if="false" src="/static/image/lock.png" style="width: 28rpx;height: 28rpx;" mode="">
						</image>
						<image v-if="false" src="/static/image/lock-active.png" style="width: 28rpx;height: 28rpx;"
							mode=""></image>
					</view>
				</view>
			</view> -->

		</view>
		<view class="" style="margin-top: 20rpx;padding: 30rpx;background-color: white;" v-if="Info.course.length > 0">
			<view class="" style="font-size: 36rpx;margin-bottom: 30rpx;font-weight: bold;">
				目录
			</view>
			<view class="" v-if="Info.is_show"
				style="padding-bottom: 15rpx;border-bottom: 1rpx solid #E7E9EB;display: flex;margin-bottom: 15rpx;"
				v-for="item in Info.course" @click="clickCourse(item)">
				<view class="" style="width: 303rpx;height: 170rpx;border-radius: 10rpx;">
					<image :src="item.banner" style="width: 303rpx;height: 170rpx;border-radius: 10rpx;" mode="">
					</image>
				</view>
				<view class=""
					style="margin-left: 24rpx;height: 170rpx;display: flex;flex-direction: column;justify-content: space-between;">
					<view class="" style="font-size: 28rpx;font-weight: bold;">
						{{item.title}}
					</view>
					<view class="">
						<span class="" v-if="item.is_lock == '0'"
							style="font-size: 18rpx;color: #FF8056;padding: 4rpx 12rpx;border: 1rpx solid #FF8056;border-radius: 10rpx;">
							免费播放
						</span>
						<span class="" v-if="item.is_lock == '1'"
							style="font-size: 18rpx;color: #3F4780;padding: 4rpx 12rpx;border: 1rpx solid #3F4780;border-radius: 10rpx;">
							报名赛事观看
						</span>
						<span class="" v-if="item.is_lock == '2'"
							style="font-size: 18rpx;color: #FF8056;padding: 4rpx 12rpx;border: 1rpx solid #FF8056;border-radius: 10rpx;">
							已有{{item.views}}人观看
						</span>
						<view class="" style="font-size: 24rpx;color: #999999;margin-top: 18rpx;">
							<span v-if="item.duration">视频时长：{{item.duration}}</span>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="" style="background-color: white;position: fixed;bottom: 0rpx;width: 100%;">
		<view class="" style="width: 100%;height: 100rpx;padding: 0 0 0 30rpx;display: flex;">
			<button open-type="contact" style="background-color: white;padding: 0;margin-top: 10rpx;">
				<view class=""
					style="display: flex;flex-direction: column;align-items: center;height: 100rpx;justify-content: center;padding: 0 5rpx;">
					<image src="/static/image/kf.png" mode="" style="width: 36rpx;height: 36rpx;"></image>
					<view class="" style="font-size: 24rpx;color: #2C2C2C;white-space: nowrap;">
						客服
					</view>
				</view>
			</button>

			<view @click="submit" :class="Info.is_enroll == '2' ? 'disabled':'pay'"
				style="width: 100%;height: 100rpx;display: flex;justify-content: center;align-items: center;color: white;margin-left: 50rpx;font-size: 32rpx;">
				<span v-if="Info.is_enroll == '0'">立即报名</span>
				<span v-if="Info.is_enroll == '1'">去支付</span>
				<span v-if="Info.is_enroll == '2'">已报名</span>
			</view>
		</view>
	</view>
	<view>
		<u-popup v-model="popShow" mode="bottom" border-radius="14" width="100%" closeable>
			<view class="" style="padding: 30rpx;" v-if="Info.goods">
				<view class=""
					style="text-align: center;font-weight: bold;padding-bottom: 30rpx;border-bottom: 1rpx solid #ECECEC;font-size: 32rpx;">
					请选择规格
				</view>
				<view class="" style="margin-top: 30rpx;">
					<view class="">
						<image :src="Info.icon ? Info.icon:Info.goods.cover"
							style="width: 100rpx;height: 100rpx;border-radius: 10rpx;" mode=""></image>
					</view>
					<view class="" style="margin-top: 20rpx;"
						v-for="(sizeItem,sizeIndex) in Info.goods.size_info.title">
						<view class="" style="font-size: 28rpx;font-weight: bold;">
							{{sizeItem.name}}
						</view>
						<view class="" style="margin-top: 30rpx;display: flex;flex-wrap: wrap;">
							<view :class="citem.choose == 2 ? 'active': citem.choose == 1 ? 'noactive':'disabled'"
								@click="clickColor(index,sizeItem.name,sizeIndex,citem.name)"
								v-for="(citem,index) in sizeItem.children"
								style="height: 60rpx;padding: 10rpx 26rpx;font-size: 28rpx;margin-right: 20rpx;border-radius: 10rpx;margin-bottom: 20rpx; ">
								{{citem.name}}
							</view>

						</view>
					</view>

				</view>
				<!-- <view class="" style="margin-top: 30rpx;">
					<view class="" style="font-size: 28rpx;font-weight: bold;">
						尺码
					</view>
					<view class="" style="margin-top: 30rpx;display: flex;flex-wrap: wrap;">
						<view :class="item.isActive ? 'active':'noactive'" @click="clickSize(index)"
							v-for="(item,index) in sizeList"
							style="height: 60rpx;width:124rpx;font-size: 28rpx;margin-right: 20rpx;border-radius: 10rpx;display: flex;justify-content: center;align-items: center; ">
							{{item.name}}
						</view>

					</view>
				</view> -->
				<view class="" style="margin-top: 60rpx;color: #9A9A9A;font-size: 28rpx;" v-if="specs">
					已选：{{specs}}
				</view>
				<view @click="pay" v-if="Info.is_enroll != '2'" class=""
					style="height: 98rpx;background: linear-gradient(90deg, #5062A7 0%, #354678 100%);color: white;display: flex;justify-content: center;align-items: center;border-radius: 10rpx;margin-top: 20rpx;font-size: 32rpx;">
					支付{{Info.price}}元报名
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script setup lang="ts">
	import tools from '@/utils/tools';
	import { ref, reactive } from 'vue'
	import { courseDetail, addViews } from '@/service/api/index'

	import { onLoad, onShow, onShareAppMessage } from '@dcloudio/uni-app'
	const tabsList = ref([
		{
			name: '详情'
		},
		{
			name: '目录'
		}
	])
	const tabIndex = ref(0)
	const colorList = ref([
		{ name: '中国红', isActive: false },
		{ name: '中国红', isActive: false },
	])
	const sizeList = ref([
		{ name: '37', isActive: false },
		{ name: '80', isActive: false },
	])
	const Info = reactive<detailInfoType>({
		id: 0,
		classify_id: 0,
		name: "",
		introduce: "",
		image: "",
		price: "",
		state: 0,
		goods: {},
		course: [] as any,
		str1: "",
		str2: "",
		enroll_id: "",
		is_enroll: "",
		icon: "",
		is_show:0
	}) as any
	const popShow = ref(false);
	const current = ref(0)
	const specs = ref('')
	const id = ref('')
	onLoad((options : any) => {
		id.value = options.id;
		//console.log(options);

	})

	onShow(() => {
		getData()
	})

	onShareAppMessage((res : any) => {
		return {
			title: Info.name,
			path: '/pageB/course/detail',
			//imageUrl: '/static/2.jpg'
		}

	})
	//获取数据
	const getData = async () => {
		const res = await courseDetail({ id: id.value })
		let key : keyof detailInfoType;
		for (key in Info) {
			Info[key] = res.msg[key]
		}
		console.log(Info);
	}
	//去播放
	const clickCourse = async (item : any) => {
		if (item.is_lock == '1') {
			tools.showToast('请购买课程后观看')
			return
		};
		await addViews({ id: item.id });
		console.log(item);
		tools.navTo('/pagesB/course/video?id=' + item.id)
	}
	//重新组装库存数据
	const resetData = (sizeIndex : number, index : number) => {
		let data = [];

		let value = Info.goods.size_info.title[sizeIndex].children[index].name;
		Info.goods.size_info.data.forEach((t : any) => {

			t.forEach((item3 : any) => {
				if (value == item3[Info.goods.size_info.title[sizeIndex].name]) {
					data.push(item3);
				}
			})

		})

		return data;
	}
	const clickColor = (index : number, name : string, sizeIndex : number, cItemName : string) => {
		//name 颜色和尺码, index 颜色和尺码数组的下标, 
		//sizeIndex 确定选择颜色还是尺码
		//choose  0不可选  1可选   2选中

		if (Info.goods.size_info.title[sizeIndex].children[index].choose == 0) return
		let value = Info.goods.size_info.title[sizeIndex].children[index].name;

		if (sizeIndex == 0) {
			Info.str1 = value;

		} else {
			Info.str2 = value;
		}
		if (Info.str2 && Info.str1) {
			specs.value = Info.str1 + '-' + Info.str2;
		}

		let titleIndex = sizeIndex == 1 ? 0 : 1;

		let data = resetData(sizeIndex, index)
		//console.log(Info.goods.size_info.title[sizeIndex].children[index]);
		let arr = Info.goods.size_info.title[sizeIndex].children;
		arr.forEach((it : any, i : number) => {
			if (it.name == cItemName && it.choose == 1) {
				it.choose = 2;

			} else if (it.choose == 2) {
				it.choose = 1;
			}
		})
		//判断哪些尺码可选
		//选中颜色 检测尺码 选中尺码检测颜色
		//console.log(data);
		let chooseArr = Info.goods.size_info.title[titleIndex].children;
		let titleName = Info.goods.size_info.title[titleIndex].name;
		console.log(data);
		chooseArr.forEach((arrItem : any, arrIndex : number) => {
			data.forEach((sizeItem : any, i : number) => {
				// console.log(sizeItem[titleName]);

				if (arrItem.name == sizeItem[titleName]) {

					if (sizeItem.stock == 0) {

						//console.log(index, i, arrIndex);	
						chooseArr[arrIndex].choose = 0;
					} else {

						if (Info.str2 && Info.str1) {
							Info.icon = sizeItem.icon

						}
						//arrItem.choose = 1;
						chooseArr[arrIndex].choose = chooseArr[arrIndex].choose == 2 ? 2 : 1;

					}
				}
			})
		})
	}
	const clickSize = (index : number) => {
		sizeList.value.forEach((item : any, i : number) => {
			if (index == i) {
				item.isActive = true;
			} else {
				item.isActive = false;
			}
		})
	}
	//报名
	const submit = () => {
		// if (Info.is_enroll == '2') return;
		if (Info.is_enroll == '1') {
			tools.navTo('/pagesB/mine/mineStudent/studentDetail?id=' + Info.enroll_id)
			return
		}
		if(!Info.goods){
			pay()
			return
		}
		popShow.value = true;
	}
	const tabsChange = (index : number) => {
		console.log(index);
		tabIndex.value = index;
		if (index == 1) {
			//点击目录
			uni.createSelectorQuery().select('#mulu').boundingClientRect((rect : any) => {
				console.log(rect);
				if (rect) {
					uni.pageScrollTo({
						scrollTop: 604 - 110,
						duration: 500
					})

				}
			}).exec()
		}
	}
	//支付报名费
	const pay = () => {
		if ((!Info.str1 || !Info.str2)&& Info.goods) {
			tools.showToast('请选择规格')
			return;
		}
		tools.navTo('/pagesB/order/index?id=' + id.value + '&specs=' + specs.value);


	}
</script>

<style scoped lang="scss">
	.page {
		min-height: calc(100vh - 68px);
		background-color: #F8F8F9;
		padding-bottom: 168rpx;
	}

	.header {
		background-color: white;
		padding: 30rpx;
		height: 264rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title-left {
				font-size: 36rpx;
				font-weight: bold;
			}

			.title-right {
				display: flex;
				align-items: center;

				.image {
					width: 36rpx;
					height: 36rpx;
				}

				.text {
					font-size: 28rpx;
					margin-left: 5rpx;
				}
			}
		}

		.subtitle {
			color: #787878;
			font-size: 28rpx;
		}

		.price {
			color: #F00505;
			font-size: 40rpx;

			span {
				font-size: 20rpx;
			}
		}

	}

	.active {
		background-color: #40518A;
		color: white;
	}

	.noactive {
		background-color: #F5F6F8;
		color: black;
	}

	.pay {
		background: linear-gradient(90deg, #5062A7 0%, #354678 100%);
	}

	.disabled {
		background-color: #ABABAB;
	}

	:deep(.u-tab-item) {
		color: black !important;
		font-size: 36rpx !important;
	}
</style>